<template>
  <div>
    <div id="container">
    </div>
    <div id="info">当前选择位置为：<span id="position"></span></div>
    <el-button type="primary"
               @click="IPPosition">ip定位</el-button>
    <el-button type="primary"
               @click="getMarker">刷新接单员位置</el-button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      map: {},
      markerLayer: {},
      position: {},
      infoWindow: {},
      bounds: {},
    }
  },
  props: {
    did: 0,
    aid: 0,
  },
  methods: {
    getMarker() {
      //由父组件传来陪护员id和残疾人id
      // 向服务器请求陪护员的坐标并计算距离
      this.$axios
        .get('location/distance/' + this.did + '/' + this.aid)
        .then((res) => {
          console.log(res.data)
          if (res.data.code == 200) {
            // 删除旧marker和距离（若存在）
            var data = res.data.data.split(',')
            var lng = data[0]
            var lat = data[1]
            var distance = data[2]
            var newPositio = new TMap.LatLng(lat, lng)
            // 添加新marker
            this.markerLayer.updateGeometries([
              {
                id: '1', //点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id
                styleId: 'myStyle', //指定样式id
                position: newPositio, //点标记坐标位置
              },
            ])
            // 显示距离
            this.infoWindow.setContent('距您:' + distance + '米')
            this.infoWindow.setPosition(newPositio)
            this.infoWindow.open()
          }
          // 自适应显示多个marker
          this.markerLayer.geometries.forEach((item) => {
            if (this.bounds.isEmpty() || !this.bounds.contains(item.position)) {
              this.bounds.extend(item.position)
            }
          })
          this.map.fitBounds(this.bounds, {
            padding: 100, // 自适应边距
          })
        })
    },
    initMap() {
      //定义地图中心点坐标
      var center = new TMap.LatLng(39.954104, 116.357503)
      //定义map变量，调用 TMap.Map() 构造函数创建地图
      this.map = new TMap.Map(document.getElementById('container'), {
        center: center, //设置地图中心点坐标
        zoom: 17.2, //设置地图缩放级别
        pitch: 43.5, //设置俯仰角
        rotation: 45, //设置地图旋转角度
      })

      //创建并初始化MultiMarker
      this.markerLayer = new TMap.MultiMarker({
        map: this.map, //指定地图容器
        //样式定义
        styles: {
          //创建一个styleId为"myStyle"的样式（styles的子属性名即为styleId）
          myStyle: new TMap.MarkerStyle({
            width: 25, // 点标记样式宽度（像素）
            height: 35, // 点标记样式高度（像素）
            //焦点在图片中的像素位置，一般大头针类似形式的图片以针尖位置做为焦点，圆形点以圆心位置为焦点
            anchor: { x: 16, y: 32 },
          }),
        },
        //点标记数据数组
        geometries: [
          {
            id: '0', //点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id
            styleId: 'myStyle', //指定样式id
            position: new TMap.LatLng(39.954104, 116.357503), //点标记坐标位置
            properties: {
              //自定义属性
            },
          },
        ],
      })
      // 绑定点击事件
      this.map.on('click', (evt) => {
        var lat = evt.latLng.getLat().toFixed(6)
        var lng = evt.latLng.getLng().toFixed(6)
        this.position = lat + ',' + lng
        position.innerHTML = lat + ',' + lng
        this.$axios
          .get(
            '/qqmap/ws/geocoder/v1/?key=NTSBZ-VAQWU-DVMV3-BDGGI-YH3X5-45BOW&location=' +
              this.position,
            {
              // proxyTable只能代理本项目的运行端口发出的请求
              baseURL: 'http://localhost/',
            }
          )
          .then((res) => {
            console.log(res)
            this.$emit('mapclick', res.data.result)
          })
      })
      // 初始化后更新ip定位
      this.IPPosition()
      // 初始化距离显示框
      this.infoWindow = new TMap.InfoWindow({
        map: this.map,
        position: center,
        zIndex: 10, //信息窗的z-index值
        offset: { x: -3, y: -35 }, //偏移
        content: '',
      })
      this.infoWindow.close()
      // 初始化显示范围
      this.bounds = new TMap.LatLngBounds()
      if (this.aid == !0 && this.did == !0) {
        this.getMarker()
      }
    },
    /* 获取ip定位 */
    IPPosition() {
      var IPLocation = new TMap.service.IPLocation()
      IPLocation.locate().then((data) => {
        console.log(data.result)
        if (data.status == 0) {
          var location = data.result.location
          console.log(location)
          var newCenter = new TMap.LatLng(location.lat, location.lng)
          this.map.setCenter(newCenter)
          this.markerLayer.updateGeometries([
            {
              styleId: 'myStyle',
              id: '0',
              position: newCenter,
            },
          ])
        }
      })
    },
  },
  mounted() {
    this.initMap()
  },
}
</script>


<style scoped>
#container {
  /*地图(容器)显示大小*/
  width: 600px;
  height: 400px;
}
#info {
  position: absolute;
  left: 170;
  top: 80px;
  font-size: 12px;
  background: #fff;
  width: 270px;
  padding: 10px;
  border-radius: 3px;
}
</style>